<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>活跃度</title>
  <link rel="stylesheet" type="text/css" href="../../css/swiper.css">
	<link rel="stylesheet" href="../../css/weui.css">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" href="../../css/vant.css">

	<!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	input{

		outline:none;
	}
  .swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide{
	text-align: center;
}
.swiper-slide span{
	padding:2px 12px;
	border: 1px solid #F85625;
	border-radius: 18px;
}

.swiper-wrapper1 .swiper-slide-active{
  /*font-size: 18px;*/
  color: #F85625;
}
.swiper-wrapper1 .swiper-slide-active:after {
  content: '';
  position: absolute;
  left: 36%;
  top: auto;
  bottom: 0;
  right: auto;
  height: 3px;
  width: 24%;
  border-radius: 8px;
  background-color: #F85625;
}
/*.swiper-slide:not(.swiper-slide-active){
  transform: scale(0.8);
}*/
input{
	padding: 0px;
}
.swiper-pagination-bullet-active{
	background:#F95656;
}
.task{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
position: fixed;
top: 40;
left: 0;
z-index: 20;
}

	</style>
</head>

<body ontouchstart>
  <div id="blank" class="header" v-cloak style="height:auto;">
    <div class="swiper-container1 swiper-container swiper-container-initialized swiper-container-horizontal" style="width:230px;margin:0 auto">
<div class="swiper-wrapper swiper-wrapper1"  >
<div class="swiper-slide" v-myclick="[0, checkgoindex]">京东</div>
<div class="swiper-slide" v-myclick="[1, checkgoindex]">淘宝</div>
<div class="swiper-slide" v-myclick="[2, checkgoindex]">拼多多</div>
</div>
<!-- Add Pagination -->
</div>
	</div>
  <div id="app" style="padding-top:60px;" >
	<div style="background:#ffffff;padding-top:10px">
    <div class="shopsearch" >
      <!-- <div class="search_container">
        <img class="icon-search" src="../../image/search.png">
        <input placeholder="请输入“淘宝”内宝贝的标题或者链接" tapmode >
      </div> -->
			<van-search placeholder="请输入搜索关键词" v-model="value" />
    </div>
    <div class="shop_filter">
      <div v-myclick="show_pick"><span>全部折扣</span><img width="10px" src="../../image/down.png"></div>
      <div>销量</div>
      <div><span>价格排序</span><img width="10px" src="../../image/down.png"></div>

    </div>

	<div class="task" @click="taskPanel" @touchmove.prevent v-show="check_active"></div>
		<div class="shop_category">
			<div class="cate_before" style="float:left;">
				<img width="20px" src="../../image/cate.png">
			</div>
			<!-- <div class="shop_cate shop_cate_items">
				<span></span>
			</div> -->
			<div style="float:right;width:94%;" class="swiper-container swiper-container2 swiper-container-horizontal swiper-container-free-mode" >
					<div class="swiper-wrapper wiper-wrapper2" style="transition-duration: 0ms;" >

							<div class="swiper-slide">
								<span>全部</span>
							</div>
							<div class="swiper-slide">
								<span >上衣</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
							<div class="swiper-slide">
								<span>裤子</span>
							</div>
					</div>

			</div>
			<div style="clear:both"></div>
		</div>

		<div class="shop_banner" style="height:auto;width:95%;margin:0 auto;margin-top:20px">
			<div class="swiper-container swiper-container3 swiper-container-horizontal">
		<div class="swiper-wrapper" style="transition-duration: 0ms;">
				<div class="swiper-slide"><img  src="../../image/usercard_bg_id1.png" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/usercard_bg_id2.png" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/usercard_bg_id3.png" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/usercard_bg_id4.png" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/demo1.jpg" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/demo2.jpg" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/demo3.jpg" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/demo4.jpg" style="width:100%"></div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination swiper-pagination3"></div>

</div>
		</div>
	</div>

			</div>
		<div class="goods"  id="mybox">
			<div class="item"  >
				<div class="goods_pic">
				<img src="../../image/demo8.jpg">
				</div>
				<p class="list-title">
					s925纯银天使翅膀灵动耳女气质甜美后挂流苏
				</p>
				<div class="pricecommon">
					<div class="price_prime" style="float:left">￥12.5</div>
					<div class="couponed_price" style="float:right">2.3万成交</div>
					<div style="clear:both"></div>
				</div>

				<div class="after_coupon">
				 用券后<span style="color:#F85625">￥112</span>
				</div>
				<div class="get_coupon">
					<span class="coupon_frist">40元券</span>
					<span class="coupon_last">领取</span>
				</div>
			</div>
			<div class="item"  >
				<div class="goods_pic">
				<img src="../../image/demo8.jpg">
				</div>
				<p class="list-title">
					s925纯银天使翅膀灵动耳女气质甜美后挂流苏
				</p>
				<div class="pricecommon">
					<div class="price_prime" style="float:left">￥12.5</div>
					<div class="couponed_price" style="float:right">2.3万成交</div>
					<div style="clear:both"></div>
				</div>

				<div class="after_coupon">
				 用券后<span style="color:#F85625">￥112</span>
				</div>
				<div class="get_coupon">
					<span class="coupon_frist">40元券</span>
					<span class="coupon_last">领取</span>
				</div>
			</div>
			<div class="item"  >
				<div class="goods_pic">
				<img src="../../image/demo8.jpg">
				</div>
				<p class="list-title">
					s925纯银天使翅膀灵动耳女气质甜美后挂流苏
				</p>
				<div class="pricecommon">
					<div class="price_prime" style="float:left">￥12.5</div>
					<div class="couponed_price" style="float:right">2.3万成交</div>
					<div style="clear:both"></div>
				</div>

				<div class="after_coupon">
				 用券后<span style="color:#F85625">￥112</span>
				</div>
				<div class="get_coupon">
					<span class="coupon_frist">40元券</span>
					<span class="coupon_last">领取</span>
				</div>
			</div>
			<div class="item"  >
				<div class="goods_pic">
				<img src="../../image/demo8.jpg">
				</div>
				<p class="list-title">
					s925纯银天使翅膀灵动耳女气质甜美后挂流苏
				</p>
				<div class="pricecommon">
					<div class="price_prime" style="float:left">￥12.5</div>
					<div class="couponed_price" style="float:right">2.3万成交</div>
					<div style="clear:both"></div>
				</div>

				<div class="after_coupon">
				 用券后<span style="color:#F85625">￥112</span>
				</div>
				<div class="get_coupon">
					<span class="coupon_frist">40元券</span>
					<span class="coupon_last">领取</span>
				</div>
			</div>
		</div>
  </div>

</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/vant.min.js"></script>

<script>
var swiper;
apiready = function () {
    setBSImg();
    // showProgress();
    // wx = api.require('wx');
    // qq = api.require('QQPlus');
    api.setStatusBarStyle({style: 'dark', color: ''});

    initApp();
    swiper();
		swiper1();
		swiper2();

    // $api.fixTabBar($api.byId('footer'));
    // addListeners();
    api.parseTapmode();
};
function initApp() {
    vm = new Vue({
        el: '#app',
        data: {
            BSImg: Vue.BSImg,
            showModal: false,
						modal:true,
            unReadMsgCount: 0,
            pageindex:true,
            showclose:false,
            plat_type:1,
						value:'',
						show:true,
						selected_index:0,

						check_active:false,
						selection: [{
						text: "综合",
						type:0
						},{
						text: "价格由高到低",
						type:1
						},{
						text: "价格由低到高",
						type:2
						}],
            plat_arr:["jd","tb","pdd"],
        },
				mounted:function(){
					this.getcategory();
					this.getgoods();
				},
        methods: {
              goindex:function () {
            },
						getcategory:function(){

						},
						getgoods:function(){

						},
						taskPanel: function (){
							this.check_active =!this.check_active;
						},
						show_pick:function(){
							this.check_active =!this.check_active;

						},
            checkgoindex:function(type){

            }
        },
    });
}
function swiper(){
   swiper = new Swiper('.swiper-container1', {
    slidesPerView: 3,
    spaceBetween: 30,
  centeredSlides: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    on: {
      slideChangeTransitionEnd: function(){
      },
    },
  });
  swiper.slideTo(1, 1000, false);
}
function swiper1() {
	swiper = new Swiper('.swiper-container2', {
	slidesPerView: 4.5,
	paginationClickable: true,
	spaceBetween: 0,
	freeMode: true,
	resistanceRatio: 0,
});
}
function swiper2() {
	swiper = new Swiper('.swiper-container3', {
		pagination: '.swiper-pagination3',
		paginationClickable: true
});
}
</script>

</html>
